<template>
  <view :class="classArr" @click="controller.onClick()">
    <slot></slot>
    <view v-if="controller.state && controller.state.error" :class="ns.e('error')">
      {{ controller.state ? controller.state.error : '' }}
    </view>
  </view>
</template>
<script setup lang="ts">
import { useNamespace } from '@/use'
import { IPanelField } from '@ibiz/model-core'
import { PanelFieldController } from './i-biz-panel-field.controller'

const props = defineProps({
  modelData: {
    type: Object as PropType<IPanelField>,
    required: true,
  },
  controller: {
    type: PanelFieldController,
    required: true,
  },
})

const ns = useNamespace('panel-field')

// 类名控制
const classArr = computed(() => {
  const { id } = props.modelData
  const result: Array<string | false> = [ns.b(), ns.m(id)]
  if (props.controller) {
    result.push(...props.controller.containerClass, ns.is('error', !!props.controller.state.error))
  }
  return result
})
</script>
<style lang="scss">
@import './i-biz-panel-field';
</style>
